<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.waitProcessList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="orderId">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="phone">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId">
                            <el-input v-model="form.userId" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="domain != 'Bene'">
                        <el-form-item prop="repayGrade">
                            <el-input v-model.number="form.repayGrade" :placeholder="$t('common.overdueDays')" clearable></el-input><!--逾期天数-->
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item prop="collectionUserName">
                            <select-account-list :type="selectDataType" v-model="form.collectionUserName" :placeholder="$t('common.recruiter')"></select-account-list>
                        </el-form-item><!--催收员-->
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="productChannel" label="">
                            <el-input v-model="form.productChannel" :placeholder="$t('common.applicationMarket')" clearable></el-input><!--应用市场-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="source" label="">
                            <el-input v-model="form.source" :placeholder="$t('common.applyChannel')" clearable></el-input><!--申请渠道-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appVersion" label="">
                            <el-input v-model="form.appVersion" :placeholder="$t('common.versionName')" clearable></el-input><!--版本号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appPackage" label="">
                            <el-input v-model="form.appPackage" :placeholder="$t('system.appPackage')" clearable></el-input><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" style="width: 100%"><!--申请时间-->
                            <el-date-picker
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    style="width: 100%;"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="isPartRepay">
                            <el-select v-model="form.isPartRepay" clearable :placeholder="$t('common.partialRepay')" style="width: 100%"><!--部分还款-->
                                <el-option key="0" :label="$t('common.presence')" :value="1"></el-option>
                                <el-option key="1" :label="$t('common.none')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" v-if="domain != 'Bene'">
                        <el-form-item prop="extensionStatus">
                            <el-select v-model="form.extensionStatus" clearable :placeholder="$t('common.whetherExtensioning')" style="width: 100%"><!--是否展期中-->
                                <el-option key="0" :label="$t('common.extensioning')" :value="1"></el-option>
                                <el-option key="1" :label="$t('common.notExtensioning')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportData" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" :row-class-name="tableRowClassName" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="orderId" :label="$t('common.innerOrderId')" width="180"><!--内部订单号-->
                            <template slot-scope="{ row }">
                                <a @click="beforeGoDetail(row)" type="text" size="small" v-if="row.orderId" :class="{'purple_color': row.extensionStatus === 1}" href="javascript:void(0);">{{ row.orderId }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userId" label="User ID" min-width="100"></el-table-column>
                        
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span>{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userName" :label="$t('common.name')" min-width="150"></el-table-column><!--姓名-->
                        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="120"></el-table-column><!--手机号-->
                        <el-table-column prop="cardId" :label="$t('common.idCardNumber')" min-width="150"></el-table-column><!--身份证号-->
                        <el-table-column prop="loanTime" :label="$t('common.applyDate')" min-width="160"><!--申请日期-->
                            <template slot-scope="{ row }">{{ row.loanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="100"><!--借款金额-->
                            <template slot-scope="{ row }">
                                <el-button  v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.contractAmount | formatCurrency }}</el-button>
                                <div v-else>{{ row.contractAmount | formatCurrency }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="periodDays" :label="$t('common.borrowingCycle')" min-width="100"><!--借款周期-->
                            <template slot-scope="{ row }">{{ row.periodDays }}{{ $t('common.day') }}</template>
                        </el-table-column>
                        <el-table-column prop="lateRepay" :label="$t('common.shouldRepayAmount')" width="100"><!--应还金额-->
                            <template slot-scope="{ row }">{{ row.lateRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.shouldRepayTime')" min-width="170" prop="repayTime"><!--应还时间-->
                            <template slot-scope="{ row }">
                                <el-button  v-if="domain=='Bene'" type="text" @click="showSpreadDialog(row)">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</el-button>
                                <div v-else>{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalPeriods" v-if="showSpread" :label="$t('install.totalBorrowPeriod')" min-width="150"></el-table-column><!--借款总周期-->
                        <el-table-column prop="period" v-if="showSpread" :label="$t('install.currentBorrowPeriod')" min-width="150"></el-table-column><!--借款当前周期-->
                        <el-table-column prop="repayGrade" :label="$t('common.overdueDays')" min-width="100">
                            <template slot-scope="{ row }">
                                <div v-if="domain=='Bene'">
                                    <el-button type="text" @click="showSpreadDialog(row)">{{ row.repayGrade}}</el-button>
                                </div>
                                <div v-else>{{ row.repayGrade}}</div>
                            </template>
                        </el-table-column><!--逾期天数-->
                        
                        <el-table-column prop="collectionUserName" :label="$t('common.recruiter')" min-width="140"></el-table-column><!--催收员-->
                        <el-table-column :label="$t('common.operation')" min-width="160">
                            <template slot-scope="scope">
                                <el-button @click="showLoanVoucher(scope.row)" type="primary" size="small">{{ $t('common.loanVoucher') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.applicationMarket')" prop="productChannel" width="130"></el-table-column><!--应用市场-->
                        <el-table-column :label="$t('common.applyChannel')" prop="source" min-width="130"></el-table-column><!--申请渠道-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130">
                            <template slot-scope="{ row }">{{ row.appName | switchAppName }}</template>
                        </el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130">
                            <template slot-scope="{ row }">{{ row.kana | switchProductName }}</template>
                        </el-table-column><!--伪名-->
                        <el-table-column :label="$t('common.versionName')" prop="appVersion" min-width="130"></el-table-column><!--版本号-->
                        <el-table-column :label="$t('system.appPackage')" prop="appPackage" min-width="130"></el-table-column><!--APP包名-->
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--放款凭证-->
        <el-dialog :visible.sync="voucherDialog.isVisible" width="800px" :title="$t('common.loanVoucher')">
            <loan-voucher v-if="voucherDialog.isVisible" :order-id="voucherDialog.orderId"></loan-voucher>
        </el-dialog>

        <!--展期中订单跳转详情确认start-->
        <el-dialog :visible.sync="extensioningDialog.extensioningDialogVisible" :showClose="false" width="416px" :title="$t('common.extensioningDialogTittle')">
            <div class="main">
                <el-row>
                    <el-col :span="10">
                        <span>{{$t('common.expiryDate')}}</span>
                    </el-col>
                    <el-col :span="10">
                        <span>{{extensioningDialog.form.repayTime | formatDate('yyyy-MM-dd')}}</span>
                    </el-col>
                </el-row>
                <el-row style="margin-top:10px;">
                    <el-col :span="10">
                        <span>{{$t('common.nowOverdueDays')}}</span>
                    </el-col>
                    <el-col :span="10">
                        <span>{{extensioningDialog.form.repayGrade}}</span>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer">
                <el-button @click="extensioningDialog.extensioningDialogVisible = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="goDetail(extensioningDialog.form)" type="primary">{{$t('common.confirmOk')}}</el-button>
            </div>
        </el-dialog>
        <!--展期中订单跳转详情确认end-->
        <el-dialog :visible.sync = 'SpreadListObj.isVisible' width="70%">
            <spreadListDialog type="pre" v-if="SpreadListObj.isVisible" :rowData="SpreadListObj.data"/>
            <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="()=>SpreadListObj.isVisible=false">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import LoanVoucher from '../../components/voucher';
    import SelectAppList from '@/components/select-app-list';
    import SelectAccountList from '@/components/select-account-list';
    import {domain} from '@/config/'
    import SelectKanaList from '@/components/select-kana-list';
    import spreadListDialog from '../../components/spread-list-Dialog'

    export default {
        name: 'collection-preOrderManage-waitList',
        components: {
            Pagination,
            LoanVoucher,
            SelectAppList,
            SelectAccountList,
            SelectKanaList,
            spreadListDialog
        },
        mixins: [mixin],
        data() {
            const checkGrade = (rule, value, callback) => {
               if(value > 999 || value < -10) {
                    return callback(this.$t('collection.plsInputRightOverday'));
                }
                else {
                    callback();
                }
            };
            return {
                SpreadListObj:{
                    isVisible:false,
                    data:{},
                },
                domain:'',
                showSpread:false,
                form: {
                    orderId: '',
                    phone: '',
                    userId: '',
                    repayGrade: '',
                    applyTime: [],
                    collectionUserId: '',
                    collectionUserName: '',
                    productChannel: '',
                    source: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    appVersion: '',
                    appPackage: '',
                    isPartRepay: '',
                    extensionStatus: ''
                },
                rules: {
                    repayGrade: [
                        {pattern: /^-?[0-9]\d*$/, message: this.$t('collection.plsInputRightOverday'), trigger: 'blur'},
                        { validator: checkGrade, trigger: 'blur' }
                    ],
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    phone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                },
                voucherDialog: {
                    isVisible: false,
                    data: {}
                },
                selectDataType: {
                    systemType: 'recruiter',
                    roleCode: 141
                },
                extensioningDialog: {
                    extensioningDialogVisible: false,
                    form: {}
                }
            };
        },
        methods: {
            showSpreadDialog(row){
                this.SpreadListObj = {
                    isVisible:true,
                    data:row
                }
            },
            beforeGoDetail(row) {
              if (row.extensionStatus === 1) {
                this.extensioningDialog.form = Object.assign({}, row);
                this.extensioningDialog.extensioningDialogVisible = true;
              }else {
                this.goDetail(row);
              }
            },
            goDetail(row) {
                this.extensioningDialog.extensioningDialogVisible = false;
                setTimeout(() => {
                    this.$openNewBlank(`#/conf/collection/order-manage/order-detail/${row.id}/${row.orderId}/${row.repayStatus}/${row.userId}/${row.repayScheduleId}/yc?appPackage=${row.appPackage}`);
                }, 100);
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.collection.queryUnprocessedOrder(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 325;
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: form.orderId,
                    phone: form.phone,
                    userId: form.userId,
                    repayGrade: form.repayGrade,
                    lstartTime: '',
                    lendTime: '',
                    collectionUserId: form.collectionUserId,
                    collectionUserName: form.collectionUserName,
                    productChannel: form.productChannel,
                    source: form.source,
                    appName: form.appName,
                    kana:form.kana,
                    whiteProductName:form.whiteProductName,
                    appVersion: form.appVersion,
                    appPackage: form.appPackage,
                    isPartRepay: form.isPartRepay,
                    extensionStatus: form.extensionStatus,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                if (form.applyTime && form.applyTime.length >= 2) {
                    params.lstartTime = form.applyTime[0];
                    params.lendTime = form.applyTime[1];
                }
                return params;
            },
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            exportData() {
                this.$refs.form.validate(val => {
                    if (val) {
                        const params = this.fillParams();
                        const user = this.$storage.get('user');
                        const language = this.$storage.getLocal('language');
                        params.language = language;
                        params.token = user.token;
                        params.source = encodeURIComponent(params.source); //针对特殊渠道转码
                        const {$apiConf} = this;
                        const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.collection.exprotUnprocessedOrderExcel, ['page']);
                        this.$openNewBlank(url);
                    }
                });
            },
            showLoanVoucher(row) {
                this.voucherDialog.orderId = row.orderId;
                this.voucherDialog.isVisible = true;
            },
            //控制表格整行高亮
            tableRowClassName({row, rowIndex}) {
                if (+row.isPartRepay === 1 ) {
                    return 'blue_color';
                }
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            this.showSpread = domain.showSpread();
            this.form.collectionUserId = this.$storage.get('user').id;
            this.getTableData();
        }
    }
</script>
<style lang="scss">
    [data-page=collection-preOrderManage-waitList] {
        .el-col {
            padding-left: 10px;
        }
        .blue_color {
            color: #1983FA;
        }
        .purple_color {
            color: #D209CB;
        }
        .content_panel_top {
            .el-button {
                margin-bottom: 18px
            }
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
    }
</style>

